<template>
	<view class="stockpile-wrap">
		<view class="order-list" v-for="(item, index) in stockpileList" :key="item.id">
			<view class="order-head">
				<view class="x-bc mb10">
					<!-- <view class="x-f">
						<view class="code-title">快递公司：</view>
						<view class="code-value">{{ item.express_name || "暂未发货" }}</view>
					</view> -->
					<view class="x-f">
						<view class="code-title">开始时间：</view>
						<view class="code-value">{{ item.create_time_text }}</view>
					</view>
				</view>
				<!-- <view class="x-bc mb10">
					<view class="x-f">
						<view class="x-f" v-if="item.dispatch_status !== 0">
							<view class="code-title">物流单号：</view>
							<view class="code-value">{{ item.express_no || "暂未发货" }}</view>
						</view>
					</view>
					<view class="x-f">
						<view class="code-value code-satus">{{ item.dispatch_status_name }}</view>
					</view>
				</view> -->
			</view>
			<view class="goods-order">
				<view class="order-content">
					<t-mini-card
						:type="item.item_first.activity_type"
						:title="item.item_first.goods_title"
						:describe="item.item_first.goods_sku_text"
						:price="item.item_first.goods_price"
						:number="item.item_first.goods_num"
						:image="item.item_first.goods_image"
						@click="
							$Router.push({
								path: '/pages/goods/detail/index',
								query: { id: item.item_first.goods_id }
							})
						"
					>
						<template #cardBottom>
							<view class="order-price-wrap x-f ">
								<text class="order-price">
									{{ item.item_first.goods_price || 0 }}
								</text>
								<button
									class="cu-btn status-btn"
									v-if="item.status == 1"
								>
									待服务
								</button>
								<button
									class="cu-btn status-btn"
									v-if="item.status == 2"
								>
									服务中
								</button>
								<button
									class="cu-btn status-btn"
									v-if="item.status == 3"
								>
									审核中
								</button>
								<button
									class="cu-btn status-btn"
									v-if="item.status == 4"
								>
									已完成
								</button>
								<button
									class="cu-btn status-btn"
									v-if="item.status == 5"
								>
									已驳回
								</button>
							</view>
						</template>
					</t-mini-card>
				</view>
			</view>
			<view class="order-bottom x-f">
				<!-- <button class="cu-btn btn1" @tap="onPrint(item.id)">查看面单</button> -->
				<!-- <button
					class="cu-btn btn2"
					v-if="item.dispatch_status !== 0"
					@tap="
						$Router.push({
							path: '/pages/app/merchant/store-express',
							query: { id: item.id }
						})
					"
				>
					查看物流
				</button> -->
				<button
					class="cu-btn btn3"
					v-if="item.status === 2"
					@tap="
						$Router.push({
							path: '/pages/app/merchant/apply?id='+item.id,
							query: { id: item.id }
						})
					"
				>
					结束服务
				</button>
				<button
					class="cu-btn btn4"
					v-if="item.status === 1"
					@tap="confirmReceipt(item.id, index)"
				>
					开始服务
				</button>
			</view>
		</view>
		<!-- 空白页 -->
		<t-empty v-if="!stockpileList.length" :emptyData="emptyData"></t-empty>
		<!-- 更多 -->
		<u-loadmore
			v-if="stockpileList.length"
			height="80rpx"
			:status="loadStatus"
			icon-type="flower"
			color="#ccc"
		/>
	</view>
</template>

<script>
import { API_URL } from "@/env";
export default {
	components: {},
	data() {
		return {
			stockpileList: [],
			loadStatus: "loadmore", //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			emptyData: {
				img: this.$IMG_URL + "/empty/empty_goods.png",
				tip: "暂无备货信息~"
			}
		};
	},
	computed: {},
	onLoad() {
		this.getStockpileList();
	},
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getStockpileList();
		}
	},
	methods: {
		// 确认收货
		confirmReceipt(id, index) {
			let that = this;
			uni.showLoading({
				title: "确认中..."
			});
			that.$api("store.startService", {
				id: id,
				store_id: uni.getStorageSync("storeId")
			}).then(res => {
				uni.hideLoading();
				if (res.code == 1) {
					that.$u.toast("服务中");
					that.stockpileList[index].status = 2;
					that.stockpileList[index].status = "服务中";
				}
			});
		},
		// 打印
		onPrint(id) {
			let that = this;
			uni.downloadFile({
				url: `${API_URL}store.store_express/export?id=${id}&store_id=${uni.getStorageSync(
					"storeId"
				)}`,
				header: {
					token: uni.getStorageSync("token")
				},
				success: res => {
					let filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						fileType: "xlsx",
						success: res => {
							console.log("打开文档成功");
						},
						fail: error => {
							console.log(error, "error");
						}
					});

					// uni.openDocument({
					// 	filePath: filePath,
					// 	success: res => {
					// 		console.log('打开文档成功');
					// 	},
					// 	fail: error => {
					// 		console.log(error, 'error')
					// 	}
					// });
				}
			});
		},
		// 门店订单列表
		getStockpileList() {
			let that = this;
			that.loadStatus = "loading";
			uni.showLoading({
				title: "加载中..."
			});
			that.$api("store.stockpileList", {
				page: that.currentPage,
				store_id: uni.getStorageSync("storeId")
			}).then(res => {
				if (res.code == 1) {
					uni.hideLoading();
					that.stockpileList = [...that.stockpileList, ...res.data.data];
					that.stockpileList.forEach(item => {
						item.updatetime = this.$u.timeFormat(item.updatetime, "yyy-mm-dd hh:MM");
					});
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = "loadmore";
					} else {
						that.loadStatus = "nomore";
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
// 订单列表
.order-list {
	background: #fff;
	margin: 20rpx 0;
	padding: 0 20rpx;
	.order-bottom {
		justify-content: flex-end;
		height: 80rpx;
		.cu-btn {
			width: 160rpx;
			height: 60rpx;
			border-radius: 30rpx;
			padding: 0;
			font-size: 26rpx;
			font-weight: 500;
			margin-left: 20rpx;
		}
		.btn1,
		.btn2 {
			background: #eeeeee;
			color: #333333;
		}
		.btn3 {
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			color: #ffffff;
		}
		.btn4 {
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			color: #ffffff;
		}
	}
	.order-head {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #dfdfdf;
		foont-size: 26rpx;
		.code-title {
			color: #666666;
		}
		.code-value {
			color: #999;
		}
		.code-satus {
			color: $t-mainColor;
		}
	}
	.goods-order {
		border-bottom: 1px solid rgba(223, 223, 223, 0.5);
		padding: 20rpx;
		margin-bottom: 20rpx;
		.order-tip {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			width: 450rpx;
			margin-bottom: 20rpx;
			.order-num {
				margin-right: 10rpx;
			}
		}
		.order-price-wrap {
			width: 480rpx;

			.status-btn {
				background: none;
				height: 32rpx;
				border: 1rpx solid #ff6361;
				border-radius: 15rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff6361;
				padding: 0 10rpx;
				margin-left: 20rpx;
				background: rgba(#ff6361, 0.16);
			}
			.order-price {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				&::before {
					content: "￥";
					font-size: 22rpx;
				}
			}
		}
	}
}
</style>
